<template>
  <div :class="['todo-item', todo.completed ?'completed':'']">
    <input 
      type="checkbox"
      class="toggle"
      v-model="todo.completed"
    >
    <label>{{todo.content}}</label>
    <button class="destory" @click="deleteTodo"></button>
  </div>
</template>


<script>
export default {
  props: {
    todo: {
      type: Object,
      required: true
    }
  },
  methods: {
    deleteTodo: function() {}
  }
};
</script>

<style lang="stylus" scoped>
.destory{
  position absolute 
  top 0
  right 10px
  bottom 0
  width 40px
  height 40px
  margin auto 0
  font-size 30px
  color #cc9a9a
  margin-bottom 11px
  transition color 0.2s ease-out
  background-color transparent
  appearance none
  border-width 0
  cursor pointer 
  outline none
  }
</style>

